<template>
	<view class="post-container">
		<view class="post-head">
			<view class="search-box">
				<view class="search-input bgFff flex-jus" @click="nologinJump('/pages/search/index')">
					<u-search placeholder="输入你要找的岗位…" disabled clearabled bgColor="#fff" :showAction="false"></u-search>
					<view class="search-btn">搜索</view>
				</view>
			</view>
			<view class="filter-box" @click="open">
				<text>筛选</text>
				<view class="filter-icon"></view>
			</view>
		</view>
		<x-skeleton type="list" :loading="loading">
			<view class="common-list" v-if="companyList.length">
				<view class="common-item" v-for="item in companyList" :key="item.id"
					@click="nologinJump(`/subpage/talentemployment/employment/companyinfo?id=${item.id}&careerId=${queryParams.id}&type=${type}`)">
					<view class="common-head">
						<view class="common-img">
							<image v-if="item.compLogo" class="company-img" :src="api_host + item.compLogo"></image>
							<image v-else class="company-img" src="https://hxs.dsjhs.com:553/prod-api/profile/company-default.png"></image>
						</view>
						<view class="common-head-name ">
							<text class="name-text ellipsis">{{ item.compName }}</text>
							<view class="common-label">
								<text>{{ item.compScale }}</text>
								<text>{{ item.compIndustry }}</text>
								<text>{{ item.compType }}</text>
							</view>
						</view>

					</view>
					<view class="common-footer">
						<text class="foot-text">
							提供工作岗位
							<text class="count">{{ item.careerStationNum }}</text>
							个
						</text>
						<text class="foot-address">{{ item.compArea }}</text>
					</view>
				</view>
			</view>
			<view v-else class="no-data">
				<text>暂无数据</text>
			</view>
		</x-skeleton>

		<view class="popup-container">
			<popup-layer ref="popupRef" direction="top" class="popup-content">
				<view class="popup-item" v-for="(item,index) in dicList" :key="index">
					<text class="popup-subtitle">{{ item.title }}</text>
					<view class="labels">
						<text v-for="(dic, idx) in item.dicts" :key="dic"
							:class="['popup-label', { 'active': idx === item.activeIndex }]"
							@tap="handleSelect(item, dic, idx)">{{ dic }}</text>
					</view>
				</view>
				<view class="popup-footer">
					<button class="reset-btn" @tap="handleReset">重置</button>
					<button class="submit-btn" @tap="handleSearch">筛选</button>
				</view>
			</popup-layer>
		</view>

	</view>
</template>

<script>
	import popupLayer from '@/components/popupLayer/index.vue'
	import {
		careerCompanys,
		dictionary
	} from '@/common/api_employment.js'
	export default {
		components: {
			popupLayer
		},
		data() {
			return {
				hasMore: true,
				loading: true,
				dicList: [],
				companyList: [],
				queryParams: {
					// id: '',
					compType: '',
					compScale: '',
					pageNum: 1,
					pageSize: 999
				},
				type: ''
			}
		},
		onLoad(option) {
			console.log(option, 777)
			this.type = option.type
			if (option && option.id) {
				this.queryParams.id = option.id
			} else {
				// this.queryParams.id = ''
			}
			this.getDictionary()
			this.getCareerCompanys()
		},
		// onReachBottom() {
		// 	console.log('到底了')
		// 	if (this.hasMore) {
		// 		this.getCareerCompanys()
		// 	}
		// },
		methods: {
			open() {
				this.$refs.popupRef.show()
				console.log(this.$refs.popupRef, 'this.$refs.popup')
				// this.$refs.popup.open()
			},
			// 筛选
			handleSelect(item, dic, idx) {
				item.activeIndex = idx
				this.queryParams[item.field] = dic === '不限' ? '' : dic

				console.log(this.dicList, idx, 'handleSelect')
			},
			handleSearch() {
				this.loading = true
				this.queryParams.pageNum = 1
				this.companyList = []
				this.getCareerCompanys()
			},
			async getCareerCompanys() {
				console.log(this.queryParams, 'this.queryParams')
				const postData = await careerCompanys(this.queryParams)
				// if (postData.data.length) {
				// 	this.companyList = this.companyList.concat(postData.data)
				// 	this.queryParams.pageNum += 1
				// } else {
				// 	this.hasMore = false
				// }
				if (postData.code === 200) {
					this.companyList = postData.data
				} else {
					this.companyList = []
				}
				
				this.loading = false
				this.$refs.popupRef.close()
			},
			handleReset() {
				for (let key in this.queryParams) {
					if (key !== 'stationName' && key !== 'careerId') {
						this.queryParams[key] = ''
					}
				}
				this.queryParams.pageNum = 1
				this.startSalary = ''
				this.endSalary = ''
				this.dicList.forEach(item => {
					item.activeIndex = 0
				})
			},
			// dictionary
			async getDictionary() {
				const dictionaryData = await dictionary()
				this.dicList = dictionaryData.data.splice(0, 2)
				this.dicList.forEach(item => {
					item.dicts.unshift('不限')
					item.activeIndex = 0
				})
				console.log(dictionaryData, 'dictionaryData')
			},
		}
	}
</script>

<style lang="scss">
	.post-container {
		width: 100%;
		min-height: 100vh;
		background-color: #F2F5FF;
		box-sizing: border-box;

		.post-head {
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			padding: 24rpx 32rpx 36rpx;
			// margin-bottom: 36rpx;
			box-sizing: border-box;

			.search-box {
				width: 558rpx;
				height: 96rpx;
				margin-right: 24rpx;
				box-sizing: border-box;

				.search-input {
					border-radius: 40rpx;
				}

				.search-btn {
					width: 160rpx;
					height: 96rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;
					background: #FFDE6D;
					border-radius: 40rpx;
					backdrop-filter: blur(25px);
				}
			}

			.filter-box {
				position: relative;
				width: 144rpx;
				height: 68rpx;
				margin-top: 14rpx;
				background: #FFFFFF;
				border-radius: 40rpx;

				text {
					padding-left: 32rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #34314F;
					line-height: 68rpx;
				}

				.filter-icon {
					position: absolute;
					right: 16rpx;
					top: 18rpx;
					width: 32rpx;
					height: 32rpx;
					box-sizing: border-box;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/down-arrow.png') no-repeat center;
					background-size: 100% 100%;
				}
			}
		}

		.common-list {
			padding: 0 32rpx;
			box-sizing: border-box;

			.common-item {
				width: 100%;
				padding: 28rpx 32rpx 32rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 40rpx;

				.common-head {
					display: flex;
					margin-bottom: 28rpx;

					.common-img {
						flex: 0 0 148rpx;
						height: 108rpx;
						border-radius: 24rpx;
						overflow: hidden;

						.company-img {
							width: 148rpx;
							height: 108rpx;
						}
					}

					.common-head-name {
						// flex: auto;
						width: calc(100% - 148rpx);
						margin-left: 20rpx;

					}
				}

				.name-text {
					display: block;
					margin-bottom: 14rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
				}

				.common-label {
					display: flex;
					flex-wrap: wrap;
					

					text {
						display: block;
						margin-right: 16rpx;
						margin-bottom: 24rpx;
						padding: 4rpx 12rpx;
						font-size: 24rpx;
						color: rgba(52, 49, 79, 0.8);
						line-height: 32rpx;
						border-radius: 8rpx;
						background-color: #F4F4F4;
						box-sizing: border-box;
					}
				}

				.common-footer {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;

					.foot-text {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.7);
						line-height: 32rpx;

						.count {
							font-weight: 600;
							font-size: 26rpx;
							color: #FF7F1C;
						}
					}

					.foot-address {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.5);
						line-height: 32rpx;
					}
				}
			}
		}

		.popup-content {
			width: 100%;
			max-height: 600px;
			min-height: 400px;
			border-radius: 20px;
			padding: 40rpx 32rpx 40rpx 32rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.popup-item {
				margin-bottom: 28rpx;

				.popup-subtitle {
					display: block;
					margin-bottom: 24rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
					text-align: left;
					font-style: normal
				}

				.labels {
					display: flex;
					flex-wrap: wrap;

					.popup-label {
						display: block;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						padding: 18rpx;
						border-radius: 16rpx;
						border: 1px solid rgba(52, 49, 79, 0.13);

						&.active {
							color: #FF7F1C;
							border: 1px solid #FF7F1C;
							background: rgba(255, 127, 28, 0.08);
						}
					}

					input {
						width: 200rpx;
						height: 76rpx;
						border-radius: 16rpx;
						text-align: center;
						border: 1px solid rgba(52, 49, 79, 0.13);
					}

					.sprate {
						font-size: 28rpx;
						color: #34314F;
						line-height: 76rpx;
						margin: 0 20rpx;
					}
				}

			}

			.popup-footer {
				display: flex;
				justify-content: space-around;

				.reset-btn {
					margin-right: 32rpx;
					background-color: rgba(52, 49, 79, 0.06);
				}

				.submit-btn {
					background-color: rgba(255, 222, 109, 1);
				}

				button {
					width: 268rpx;
					height: 96rpx;
					border-radius: 40rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;

					&::after {
						border: 0;
					}
				}
			}
		}
	}

	.ellipsis {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的部分 */
		// max-width: 200rpx; /* 设置最大宽度以限制文本的显示长度 */
	}
</style>